<template>
    <el-card class="card-bar">
        <div class="flex">
            <div class="blue-radius"></div>
            <h2 class="page-title">待处理签约</h2>
        </div>
        <div
            style="display: flex;justify-content: space-between;height: 40px;align-items: center;overflow: hidden;margin: 20px 0;">
            <el-form label-width="80" :inline="true" :model="searchData" class="demo-form-inline"
                style="margin: 20px 0;--el-font-size-base:13px;--el-input-height:42px;--el-text-color-placeholder: #000;--el-bg-color:#F2F2F2">
                <el-form-item label="签约状态">
                    <el-select v-model="searchData.state" clearable>
                        <el-option value="" label="请选择" />
                        <el-option value="1" label="待审核" />
                        <el-option value="2" label="待支付" />
                        <el-option value="0" label="已驳回" />
                    </el-select>
                </el-form-item>
                <el-form-item label="签约机构">
                    <el-select v-model="searchData.organizationId" clearable>
                        <el-option value="" label="请选择" />
                        <el-option :label="item.name" :value="item._id" v-for="item in organization" />

                    </el-select>
                </el-form-item>
                <el-form-item label="民生团队">
                    <el-select v-model="searchData.teamId" clearable>
                        <el-option value="" label="请选择" />
                        <el-option :label="item.name" :value="item._id" v-for="item in team" />
                    </el-select>
                </el-form-item>
            </el-form>
            <el-button type="primary" plain style="--el-color-primary-light-9:transparent">导出</el-button>
        </div>
        <el-form label-width="80" :inline="true" :model="searchData" class="demo-form-inline"
            style="margin-bottom: 25px;">
            <el-form-item label="服务包">
                <el-select v-model="searchData.servicePackId" clearable>
                    <el-option value="" label="请选择" />
                    <el-option :value="item._id" :label="item.name" v-for="item in packData" :key="item._id" />

                </el-select>
            </el-form-item>
            <el-form-item label="选择日期">
                <el-date-picker style="width: 360px;height: 40px;" v-model="value" type="daterange"
                    start-placeholder="请选择日期" end-placeholder="请选择日期" value-format="YYYY-MM-DD HH:mm:ss"
                    :default-time="defaultTime" />
            </el-form-item>
            <el-form-item>
                <el-input style="height: 30px;width: 376px;--el-input-height:40px">
                    <template #suffix>
                        <el-icon class="el-input__icon">
                            <search />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="signData" stripe
            style="width: 100%;margin-bottom: 15px; --el-table-header-text-color: #333333;">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="_id" label="编号" align="center" />
            <el-table-column prop="residentId.name" label="签约人姓名" align="center" />
            <el-table-column prop="residentId.IDnumber" label="身份证号" align="center" />
            <el-table-column prop="residentId.phone" label="手机号码" align="center" />
            <el-table-column prop="state" label="签约状态" align="center">
                <template #default="scope">
                    <span v-if="scope.row.state == 1" style="color: #3DD4A7;">待审核</span>
                    <span v-if="scope.row.state == 2" style="color: #FDDB78;">待支付</span>
                    <span v-if="scope.row.state == 0" style="color: #FA746B;">已驳回</span>
                </template>
            </el-table-column align="center">
            <el-table-column prop="teamId.name" label="签约医生团队" align="center" />
            <el-table-column prop="servicePackId.name" label="签约服务包" align="center" />
            <el-table-column prop="applyTime" label="最后修改时间" align="center" />
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <div style="display: flex;align-items: center;justify-content: center;">
                        <el-button type="primary" link @click="toDetail(scope.row._id)"
                            permission="签约详情">查看详情</el-button>
                        <el-button type="primary" link @click="toUpdate(scope.row._id)" permission="编辑签约">编辑</el-button>
                    </div>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页 -->
        <div style="display: flex;justify-content: flex-end;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :page-sizes="[5, 10, 20, 50]" :size="size" :disabled="disabled" background
                layout="total, sizes, prev, pager, next, jumper" :total="total" />
        </div>
    </el-card>
</template>

<script setup>
import {
    Search,
} from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue';
import { searchOrganizationsApi } from '../../../api/organizations';
// import { findTeamApi } from '../../../api/teamManage';
import { addSignApi, findSignApi } from '../../../api/sighPending';
import { searchTeamsApi } from '../../../api/teamManage';
import { useRouter } from 'vue-router';
import { getServicePackageApi } from '../../../api/servicePacksge';

const router = useRouter()

// 签约记录
const signData = ref([])
// 分页
const total = ref(1);
const pageData = ref({
    pageSize: 5,
    currentPage: 1
})


function addSign() {
    // addSignApi({
    //     _id:
    // })
}




// 跳转编辑
function toUpdate(data) {
    router.push('/sign/update/' + data)
}

const searchData = ref({
    state: '',
    organizationId: '',
    teamId: '',
    servicePackId: '',
    name: '',
})

// 跳转详情
function toDetail(data) {
    router.push('/sign/detail/' + data)
}

const value = ref('')
const defaultTime = ref < [Date, Date] > ([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
])

onMounted(() => {
    findOrganization()
    getTeam()
    findSignData()
    getPack()
})

// 机构
const organization = ref([])
const team = ref([])

// 查询机构
function findOrganization() {
    searchOrganizationsApi()
        .then(res => {
            if (res.code == 200) {
                organization.value = res.data.rows
            }
        })
}

const packData = ref([])

// 获取服务包
function getPack() {
    getServicePackageApi()
        .then(res => {
            packData.value = res.data.rows
        })
}

// 获取团队
function getTeam() {
    searchTeamsApi()
        .then(res => {
            if (res.code == 200) {
                team.value = res.data.rows
            }
        })
}

watch(searchData, () => {
    findSignData()
}, { deep: true })
watch(pageData, () => {
    findSignData()
}, { deep: true })

// 签约数据
function findSignData() {
    findSignApi({ type: 'pending', ...pageData.value, ...searchData.value })
        .then(res => {
            if (res.code == 200) {
                signData.value = res.data.rows
                total.value = res.data.total
            }
        })
}


</script>

<style scoped>
.class-bar {
    background-color: #fff;
}



.title-bar {
    height: 20px;
    display: flex;
    align-items: center;
    line-height: 20px;
}

.title-bar div {
    width: 6px;
    height: 20px;
    border-radius: 16px;
    margin-right: 15px;
    background-color: var(--el-color-primary);
}

.el-form-item--label-right .el-form-item__label {
    height: 40px;
    display: inline-block;
}



.title-bar span {
    color: var(--el-title-font-color);
    font-size: var(--el-title-font-size);
    font-weight: var(--el-title-font-weight);
}

.el-select {
    height: 40px;
    width: 200px;
    padding: 0;
    box-sizing: border-box;
}

.el-input {
    height: 40px !important;
}

.el-select__placeholder.is-transparent {
    font-size: 13px;
}
</style>
<style>
.el-select__wrapper {
    font-size: 13px !important;
    height: 40px;
}

.el-form .el-form-item {
    margin: 0;
    margin-right: 15px;
}

.el-form-item__label {
    color: #999999;
}

.el-table thead tr {
    background-color: #F2F2F2 !important;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.el-date-editor .el-range-input {
    color: #999999;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.tableHeader {
    background-color: rgb(242, 247, 251)
}

.page-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 550;
    color: #333333E5;
}

.blue-radius {
    border-width: 0px;
    width: 6px;
    height: 20px;
    background: inherit;
    background-color: rgba(41, 132, 248, 1);
    border: none;
    border-radius: 8px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-top: 4px;
    margin-right: 10px;
}
</style>
<style>
.el-table thead {
    font-weight: 400 !important;
}

.el-form-item--label-right .el-form-item__label {
    height: 40px !important;
    line-height: 40px;
    margin-right: 10px;
}
</style>